<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="/css/common.css" th:href="@{/css/common.css}">
    <link rel="stylesheet" type="text/css" href="/css/index.css" th:href="@{/css/index.css}">
    <link rel="stylesheet" type="text/css" href="/iconfont/iconfont.css" th:href="@{/iconfont/iconfont.css}">
    <link rel="stylesheet" type="text/css" href="/css/detail.css" th:href="@{/css/detail.css}">
    <script type="text/javascript"  th:src="@{/js/jquery.min.js}" ></script>
    <script type="text/javascript" th:src="@{/js/detail.js}"></script>
    <script type="text/javascript"  th:src="@{/js/jquery.cookie.js}" ></script>
<!--    <script th:src="@{/js/detail.js}" />-->
    <script th:inline="javascript" type="text/javascript">
        $(function (){



            $("#comBtn").click(function (){
                console.log("点击成功")
                var inputValue = $("#inputValue").val()
                var userid = $.cookie('userId')

               if(inputValue != '' || inputValue != null){
                   var data = {
                       letterCommentsId:[[${article.userId}]], // 读取 cookie
                       title:[[${article.title}]],
                       articleId:[[${article.id}]],
                       center:inputValue,
                       userId:userid
                   }
                    $.ajax({
                        type:"post",
                        url:"/comments/insert",
                        data:data,
                        success:function (res){
                            console.log('评论成功')
                        }
                    })

                   alert("评论成功")
                   location.reload()
               }else{
                   alert("请输入评论")
               }
            })
        })


    </script>
</head>
<body>
<div class="w_100 flex flex-column align-center img_bg">
    <!-- 头部 -->
    <div th:insert="index::topHeader" class="w_100"></div>
    <div class="mt-1 w_70 flex flex-column align-center">
        <div class="item_topBar w_70  flex align-center">
            <p class="text-mini ml-2">当前位置：</p>
            <p class="text-mini ml-1">首页</p>
            <p class="text-mini mx-2">></p>
            <p class="text-mini ">详情</p>
        </div>
        <div class="w_70 flex mt-2 ">
            <!-- left -->
           <div class="flex-5">
               <div class=" item_left_center item_kuang_y px-2 py-3">
                   <p class="font-sm font-weight-bold" th:text="${article.title}"></p>
                   <div class="mt-3 flex align-center">
                       <i class=" iconfont icon-shijian  text-black text-mini"></i>
                       <p class="fon_ba ml-05">9-20</p>
                       <i class=" iconfont icon-yuedu  text-black text-mini ml-1"></i>
                       <p class="fon_ba ml-05" th:text="${article.readingNum}"></p>
                       <i class=" iconfont icon-xiaoxi  text-black text-mini ml-1"></i>
                       <p class="fon_ba ml-05">0评论</p>
                   </div>
                   <div class="mt-3 border-top ">
                       <img th:src="@{/images/center_img/img_list0.jpeg}" class="item_img mt-2">
                       <div class="flex flex-wrap">
                           <p class="font-sm my-2" th:text="${article.center}"></p>
                       </div>
                   </div>
               </div>
               <!-- 写评论 -->
               <div class="mt-3 item_kuang_y flex align-center px-3" style="height: 80px;">
                   <img th:src="@{/images/center_img/center_toux.png}" class="item_tx_img" >
                   <div class="flex align-center item_input_text mx-2">
                       <input type="text" placeholder="请输入评论" id="inputValue">
                   </div>

                   <div class="ml-3 item_btn_pinglun flex align-center justify-center"
                        id="comBtn" οnclick="goComment">
                       <p class="text-white fon_ba ">评论</p>
                   </div>

               </div>

               <!-- 评论列表 -->
               <div class="mt-3 pb-2 item_kuang_y item_y_o">
                   <div class="top_comments border-bottom flex align-end">
                       <p class="font-mini ml-2 item_com_left">评论列表</p>
                       <p class="fon_ba ml-1 mb-05" th:text="'(共有'+${commLength}+'条评论)'"></p>
                   </div>
                   <div class="m-2 flex align-center justify-between" th:each="item : ${commentsList}">
                       <div class="flex align-center">
                           <img th:src="@{/images/center_img/center_toux.png}" class="toux_commtens">
                           <p class="fon_ba ml-05" style="color: #4a4a4e;" th:text="${item.users[0].nikeName}+'：'"></p>
                           <p class="fon_ba ml-1" th:text="${item.center}"></p>
                       </div>
                       <div class="flex align-center">
                           <i class=" iconfont icon-gouwugouwuchedinggou  text-black"
                              style="font-size: 20px;"></i>
                           <p class="ml-1 fon_ba">6</p>
                       </div>
                   </div>

               </div>
           </div>
            <!-- right -->
            <div class="flex-2 ml-2 flex flex-column align-center ">
                <div th:insert="index::rightItem"></div>
            </div>
        </div>
    </div>

</div>

</body>
</html>